<template>
  <view>
    <my-message-top :text="'历史记录'" :pic="'../../static/more.png'" @open="deleteHistory()"></my-message-top>
    <view class="origin-pic">
      <text>原始图片</text>
      <image :src="historyDetail.sourceImg" mode=""></image>
    </view>
    
    <view class="style-pic">
      <text class="style-t1">{{historyDetail.style}}</text>
      <view class="style-pic-box">
        <image :src="historyDetail.styleImg" mode=""></image>
        <view class="style-pic-btn">
          <view @click="collectPic()">
            <text>收藏</text> 
          </view>
          <!-- <view >
            <text @click="cancelPic()">取消收藏</text>
          </view> -->
        </view>
      </view>
      <text class="style-t2">{{historyDetail.createTime}}</text>
    </view>
    <uni-popup ref="popup" :mask-click="false">
    	<button @click="dHistory()">确认删除该记录</button>
    	<button @click="close()">取消</button>
    </uni-popup>

  </view>
</template>

<script>
  import {getHistoryDetail,deleteRecord} from '../../api/history.js'
  import {collectPic} from '../../api/collect.js'
  export default {
    data() {
      return {
        historyDetail: {},
        imgs:[],
        pic: '',
        id: 0
      };
    },
    onLoad(option){
      this.getHistoryDetail(option.id)
      this.id = option.id
    },
    methods:{
      async getHistoryDetail(id){
        const {data:{data:data}} = await getHistoryDetail(id)
        this.historyDetail = data
        this.imgs.push(data.styleImg)
      },
      async collectPic(){
        const {data:data} = await collectPic(this.imgs)
        console.log(data);
        if(data.code === 200) return uni.$showMsg('收藏成功')
      },
      deleteHistory(title){
        console.log(title);
        this.$refs.popup.open('bottom')
      },
      close() {
      			this.$refs.popup.close()
      },
      async dHistory(){
        console.log('deleta');
        const {data:data} = await deleteRecord(this.id)
        console.log(data);
        this.$refs.popup.close()
        if(data.code === 200) return uni.$showMsg('删除记录成功')
        
      }
    }
    
  }
</script>

<style lang="scss">
.origin-pic{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin: 25rpx 50rpx;
  text{
    font-size: 20px;
    font-weight: bold;
    color: #666666;
    margin-bottom: 25rpx;
  }
  image{
    width: 395rpx;
    height: 395rpx;
  }
}

.style-pic{
  width: 635rpx;
  height: 588rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin: 50rpx 25rpx;
  background-color: #ffffff;
  padding: 25rpx 35rpx;
  .style-t1{
    font-size: 16px;
    font-weight: bold;
    color: #666666;
  }
  .style-pic-box{
    display: flex;
    justify-content: space-between;
    align-items: space-between;
    image{
      width: 395rpx;
      height: 395rpx;
    }
    .style-pic-btn{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 40rpx;
      view{
       width: 192rpx;
        height: 74rpx;
        background-color: #FFDC91;
        border-radius: 37rpx;
        text-align: center;
        text{
          font-size: 15px;
          font-weight: bold;
          color: #666666;
          line-height: 74rpx;
          
        }
      }
    }
  }
  .style-t2{
    font-size: 12px;
    color: #868686;
  }
}
</style>
